<template>
  <div class="ssList">
    <input
      type="text"
      placeholder="出行目的地"
      @focus="is = true"
      @blur="isFocus ? '' : (is = false)"
      :value="InputVal"
    />
    <div
      v-show="is"
      class="Input-Nav"
      @mouseover="isFocus = true"
      @mouseout="endFocus"
    >
      <ul>
        <li v-for="item,i in list" :key="i">
          <div>{{item.name}}</div>
          <div>
            <a @click="itemClickEve(item2)" v-for="item2,ii in item.list" :key="ii">{{item2}}</a>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      is: false,
      list: [
        {
          name:"中国",
          list:['台北','香港','北京','杭州','上海','成都','垦丁','花莲','重庆','厦门','大理','三亚']
        },
        {
          name:"亚洲",
          list:['东京','大阪','京都','曼谷','清迈','普吉岛','首尔','新加坡','甲米','芭提雅','吉隆坡','苏梅岛']
        },
        {
          name:"欧洲",
          list:['巴黎','伦敦','罗马','佛罗伦萨','巴塞罗那','阿姆斯特丹','慕尼黑','柏林','斯德哥尔摩','圣托里尼','布拉格','维亚纳']
        },
        {
          name:"北美",
          list:['纽约','洛杉矶','拉斯维加斯','旧金山','塞班岛','黄石国家公园']
        },
        {
          name:"大洋洲",
          list:['悉尼','墨尔本','大洋路','黄金海岸','皇后镇','基督城']
        }
      ],
      isFocus: false,
      InputVal:""
    };
  },
  methods: {
    itemClickEve(item) {
      this.is = false;
      this.InputVal = item
      console.log("test-你点击的是:", item);
    },
    endFocus() {
      this.isFocus = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.ssList {
  width: 340px;
  height: 47px;
  margin: 0px 10px 0px 0;
  position: relative;
  z-index: 9;
  display: inline-block;
  // background-color: #ffa800;
  & > input {
    width: 340px;
    height: 45px;
    border: 1px solid #999;
    font-size: 16px;
    color: #666;
    border-radius: 4px;
    padding: 0 0 0 10px;
    outline: 0;
    &:focus {
      border: 1px solid #ffa800;
      box-shadow: 0 0 4px #ffa800;
      transition: box-shadow 0.4s linear 0s;
    }
  }
  .Input-Nav {
    width: 725px;
    padding: 25px 10px 0 10px;
    border: 1px solid #c6c6c6;
    border-radius: 4px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
    background: #fff;
    ul {
      margin-top: -10px;
      li {
        display: flex;
        margin-bottom: 20px;
        &>div:nth-child(1){
          width: 80px;
          font-size: 17px;
          color: #666;
          line-height: 300%;
        }
        &>div:nth-child(2){
          width: 645px;
          a{
            cursor: pointer;
            display: inline-block;
            line-height: 300%;
            width: 107px;
            color: #666;
            font-size: 14px;
            &:hover{color: #ffa800;}
          }
        }
      }
    }
  }
}
</style>